<!--
 * @Author: your name
 * @Date: 2021-09-02 09:50:15
 * @LastEditTime: 2021-09-15 15:24:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\layouts\headernav.vue
-->
<template>
    <div class="headernav">
          <Col :md="{ span: 0 }" :xs="{ span: 0 }" :lg="{ span: 18 }">
        <div class="headernavs">
            <div
                :class="[
                    'headernav_move',
                    allleft < routerArr.length * 90 ? '' : 'left',
                    allleft < routerArr.length * 90 && offleft ? '' : 'disable',
                ]"
                @click="onMoveScrollAdd(-1)"
            >
                <svg-icon icon-class="arrow-left" size="1.5"></svg-icon>
            </div>
            <div ref="list" class="headernavs_list">
                <Tag
                    v-for="(item, index) in routerArr"
                    :key="item.id"
                    :color="item.name == routerindex ? getModevalue?'#ccc':'#fef' : getModevalue?'#343434':'#eff'"
                >
                    <div
                        class="tagitem"
                        :style="{ color: item.name == routerindex ? '#666' : getModevalue?'#fff':'' }"
                    >
                        <span><svg-icon :icon-class="item.name" size="1"></svg-icon></span>
                        <span @click="navTolink(index)">{{ $t(item.name) }}</span>
                        <span
                            v-if="!index == 0"
                            @click="CloseRouter(index)"
                        ><svg-icon icon-class="close" size=".8"></svg-icon></span>
                    </div>
                </Tag>
            </div>
            <div
                :class="[
                    'headernav_move',
                    allleft < routerArr.length * 90 ? '' : 'right',
                ]"
                @click="onMoveScrollAdd(1)"
            >
                <svg-icon icon-class="arrow-right" size="1.5"></svg-icon>
            </div>
        </div>
        </Col>
         <Col :md="{ span: 19 }" :xs="{ span: 19 }" :lg="{ span: 0 }">
        <div class="headernavs minNvas">
       
            <div class="headernavs_list">
                <Tag
                    v-for="(item, index) in routerArr"
                    :key="item.id"
                    :color="item.name == routerindex ? getModevalue?'#ccc':'#fef' : getModevalue?'#343434':'#eff'"
                >
                    <div
                        class="tagitem"
                        :style="{ color: item.name == routerindex ? '#666' : getModevalue?'#fff':'' }"
                    >
                        <span><svg-icon :icon-class="item.name" size="1"></svg-icon></span>
                        <span @click="navTolink(index)">{{ $t(item.name) }}</span>
                        <span
                            v-if="!index == 0"
                            @click="CloseRouter(index)"
                        ><svg-icon icon-class="close" size=".8"></svg-icon></span>
                    </div>
                </Tag>
            </div>
        </div>
        </Col>
        <div class="headernav_bar">
            <div class="headernav_bar_close">
                <span @click="onEmptyRouter">
                    <Tooltip placement="bottom">
                        <template #title>
                            {{ $t("Modal.iconclear") }}
                        </template>
                        <svg-icon icon-class="clear" size="1"></svg-icon>
                    </Tooltip>
                </span>
            </div>
            <div class="headernav_bar_reload">
                <span style="" @click="onReloadRouter">
                    <Tooltip placement="bottom">
                        <template #title>
                            {{ $t("Modal.pagereload") }}
                        </template>
                        <svg-icon icon-class="reload" size="1"></svg-icon>
                    </Tooltip>
                </span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    onMounted,
    ref,
    watchEffect,
    computed,
    unref
} from 'vue'
import { useRouter } from 'vue-router'
import { Tag, Tooltip,Col } from 'ant-design-vue'
import { useMassage } from '../ntils/hooks'
import { reloadRouter } from '../setting/menuTrigger'
import i18n from '../setting/locales/setlocales'
import { modevalue } from '../setting/theme'
const { t } = i18n.global
let time = null
let { createMessage } = useMassage()
type RouterType = {
  name: String;
  path: String;
  id: String;
};
export default defineComponent({
    name: 'Headernav',
    components: {
        Tag,
        Col,
        Tooltip,
    },
    setup() {
        const { currentRoute } = useRouter()
        let list = ref<HTMLDivElement>()
        let router = useRouter()
        let routerindex = ref('')
        let offleft = ref()
        let endleft = ref()
        let allleft = ref()
        allleft.value = 0
        endleft.value = 0
        offleft.value = 0
        let w = 90;
              // 主题模式
        const getModevalue = computed(()=>{
              return unref(modevalue.value); 
        })
        onMounted(() => {
            // 容器偏移量
            offleft.value = list.value?.scrollLeft
            //  可视总长度
            allleft.value = list.value?.clientWidth
            // 滚动长度
            endleft.value = allleft.value - routerArr.value.length * w
        })
        // 保留首页   顶部路由与侧边路由联动
        const routerArr = ref<Array<RouterType>>([
            {
                name: 'homePage',
                path: '/',
                id: `${Math.random() * 3 + 12 * (Math.random() * 65 + 12)}`,
            },
        ])
        let nameArr = ['homePage']
        // 不能使用map,filter 等方法过滤返回数组 会造成不能数组切割
        // 监听路由
        watchEffect(async () => {
            let obj: RouterType = {
                name: currentRoute.value.name,
                path: currentRoute.value.path,
                id: `${Math.random() * 3 + 12 * (Math.random() * 65 + 12)}`,
            }
            routerindex.value = obj.name
            // 首先检测路由是否存在 不存在 加入列表
            if (!nameArr.includes(obj.name) && obj.name != '404') {
                routerArr.value.push(obj)
                nameArr.push(obj.name)
            }
        })
        // 路由跳转
        const navTolink = (index) => {
            let path = routerArr.value[index].path
            router.push(path)
        }

        // 删除路由
        const CloseRouter = (index) => {
            // 如果当前页面为首页那 则不用跳转
            if (routerArr.value.length == 1 && routerArr.value[0].path == '/index') return false
            // 判断如果删除的是当前显示页面，删除后系统会跳转到上一个路由直到首页 前提长度必须大于1
            if (
                nameArr.indexOf(routerindex.value) == index
        && routerArr.value.length > 1
            ) {
                navTolink(index - 1)
            }
            routerArr.value.splice(index, 1)
            nameArr.splice(index, 1)
            // 首页固定 不能删除
        }
        // 清空记录
        const onEmptyRouter = () => {
            let len = nameArr.length - 1
            if (len == 0) {
                createMessage.warn(t('Modal.icontip'))
                return false
            }
            routerArr.value.splice(1, len)
            nameArr.splice(1, len)
            router.push('/')
        }
        //   刷新子页面
        //   控制子路由的router-view的显示与隐藏
        const onReloadRouter = () => {
            let path = routerArr.value[nameArr.indexOf(routerindex.value)].path
            reloadRouter(false)
            // 防抖 为了防止用户频繁刷新
            time && clearTimeout(time)
            time = setTimeout(() => {
                router.replace(path)
                reloadRouter(true)
                time = null
            }, 400)
        }
        // 双方向滚动条
        const onMoveScrollAdd = (n) => {
            let offsetScroll = allleft.value

            // 滚动条偏移量
            endleft.value = offsetScroll - routerArr.value.length * w
            // 如果自身长度小于数组长度说明列表中的数据比较少无需滚动条
            if (offsetScroll > routerArr.value.length * w) return
            let time1: any = null
            let time2: any = null
            let targetLeft = 50
            let l = 0
            time1 && clearTimeout(time1)
            time1 = setTimeout(() => {
                time2 = setInterval(() => {
                    l++
                    list.value.scrollLeft = list.value.scrollLeft + 1 * n
                    offleft.value = list.value.scrollLeft
                    console.log(endleft.value, offleft.value)
                    if (l > targetLeft) {
                        clearInterval(time2)
                        clearTimeout(time1)
                    }
                }, 8)
            }, 100)
        }
        return {
            routerArr,
            navTolink,
            routerindex,
            getModevalue,
            CloseRouter,
            onEmptyRouter,
            onReloadRouter,
            onMoveScrollAdd,
            offleft,
            endleft,
            allleft,
            list,
        }
    },
})
</script>

<style lang="less" scoped>
@import "../styles/pagestyle.less";

.disable {
  cursor: not-allowed;
}
::-webkit-scrollbar-track {
  background-color: rgba(247, 244, 244, 0);
  
}

::-webkit-scrollbar-thumb {
  // background: rgba(0, 0, 0, 0.6);
  background-color: rgba(144, 147, 153, 0.1);
  // background-color: rgba(144, 147, 153, 0.3);
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar {
  width: 2px;
  height: 3px;
}
.headernav {
  background: #fff;
  width: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  &_move {
    transform: translateX(0);
    opacity: 1;
    transition: all 0.2s ease-in 0s;
    width: 25px;
    text-align: center;
    &.left {
      transform: translateX(-10px);
      opacity: 0;
      width: 0px;
    }
    &.right {
      transform: translateX(10px);
      opacity: 0;
      width: 0px;
    }
  }
  .headernavs {
    width: 100%;
    display: flex;
    align-items: center;
    &_list {
      display: flex;
      flex-wrap: nowrap;
      width: 90%;
      overflow-x: scroll;

      .tagitem {
        display: flex;
        align-items: center;
        cursor: pointer;
        color: #666;
        & > span {
          display: inline-block;
          display: flex;
          align-items: center;
          &:nth-of-type(2) {
            margin: 0 4px;
          }
          &:nth-of-type(3) {
            cursor: pointer;
            &:hover {
              transform: scale(0.9);
            }
          }
        }
      }
    }
  }

  &_bar {
    display: flex;
    align-items: center;
    & > div {
      margin: 0 5px;
      span {
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;

        &:hover {
          background: #cadceb;
          border-radius: 3px;
        }
      }
    }
  }
}
html[data-theme='dark']{
    .headernav{
         background: transparent;
    }
  ::-webkit-scrollbar-track {
  background-color: rgba(247, 244, 244, 0.1);
    
    }
}
</style>
